<template>
  <div class="footCont">
    <div @click="footfn(item)" :class="$route.path==item.url?'footItem_active':'footItem'" :key="index" v-for="(item,index) in footArr">
      <img :src="item.icon+ossSrc" />
      <div class="footVal">{{item.val}}</div>
      <div v-if="item.waitNum" class="tipNum">2</div>
    </div>
  </div>
</template>

<script>
  // import {waitOrder } from '@/http/api'
  import bus from '@/assets/evnetBus.js'

    export default {
        components: {},
        data() {
            return {
              footArr:[
                {url:'/home',val:'首页',icon:'static/img/shop.png',active:false,showNum:false},
                {url:'/order',val:'订单',icon:'static/img/order.png',active:false,showNum:true},
                {url:'/goods',val:'商品',icon:'static/img/allGoods.png',active:true,showNum:false},
              ],
            }
        },
        props: {},
        methods: {
          footfn(item){
            this.$router.replace({path:item.url})
          },
          getData(){
            let data = {}
            waitOrder(data).then((res)=>{
                this.showCont= true
                if(res.data.code==1){
                  this.footArr[2].waitNum= res.data.data
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
        },
        },
        mounted() {
          bus.$on('getWait',()=>{
            this.getData()
          })
        },
        created() {
          // this.getData()
        },
    }
</script>

<style scoped lang="less">
  .footCont{
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 102;
    bottom: -1px;
    background-color: #fff;
    // border-top: 1px solid #ebebeb;
    // box-shadow: 0 -0.1rem 0.5rem #ebebeb;
    display: flex;
    justify-content: space-between;
    .footItem,.footItem_active{
      width: 50%;
      height: 3rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #999;
      justify-content: center;
      position: relative;
      .tipNum{
        position: absolute;
        top: 0.25rem;
        right: 0.8rem;
        background-color: red;
        color: white;
        padding: 0 0.35rem;
        height: 1rem;
        border-radius: 1rem;
        text-align: center;
        line-height: 1rem;
      }
      img{
        width: 1.5rem;
      }
      .footVal{
        font-size: 0.6rem;
        margin-top: 0.1rem;
      }
    }
    .footItem_active{
      color: #e95551;
    }
  }
</style>
